<template>
  <div>
    <svg :width="widthData" :viewBox="`0 0 ${2*radius + defaultSrtokeWidth} ${2*radius + defaultSrtokeWidth}`">
      <path
        :d="`M ${srtokeWidth/2} ${widthData / 2 + srtokeWidth/2} a ${radius} ${radius} 0 1 0 ${radius * 2} 0 a ${radius} ${radius} 0 1 0 -${radius * 2} 0`"
        :stroke-width="srtokeWidth"
        :stroke="emptyColor"
        fill="none"
        stroke-linecap="round"
      ></path>
      <defs>
        <linearGradient :id="'grad_' + typeData">
          <stop offset="0%" :style="{stopColor:colorFirst, stopOpacity:1}" />
          <stop offset="50%" :style="{stopColor:colorSecond, stopOpacity:1}" />
        </linearGradient>
      </defs>
      <path
        :d="`M ${ srtokeWidth/2} ${widthData / 2 - srtokeWidth/2} a ${radius} ${radius} 0 1 0 ${radius * 2} 0 a ${radius} ${radius} 0 1 0 -${radius * 2} 0`"
        :stroke-width="srtokeWidth"
        :stroke="'url(#grad_' + typeData + ')'"
        fill="none"
        stroke-linecap="round"
        :transform="`rotate(90 ${radius} ${radius})`"
        :stroke-dasharray="strokeDasharray"
        :stroke-dashoffset="strokeDashoffset"
      >
        <animate
          attributeName="stroke-dashoffset"
          :dur="`${durTime}ms`"
          fill="freeze"
          :from="strokeDasharray"
          :to="strokeDashoffset"
        ></animate>
      </path>
    </svg>
  </div>
</template>

<script>

export default {
  props: {
    chartCount: {
      type: Number,
      default: 0
    },
    colorFirst: {
      type: String,
      default: ''
    },
    colorSecond: {
      type: String,
      default: ''
    },
    typeData: {
      type: Number,
      default: 0
    },
    widthData: {
      type: String,
      default: ''
    },
    widthType: {
      type: Number,
      default: 0
    },
    topData: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      defaultDurTime: 1200,
      defaultEmptyColor: 'rgba(255, 255, 255, .2)',
      defaultNegativeColor: '#FF4456',
      defaultPositiveColor: '#56D5E4',
      defaultSrtokeWidth: this.widthType,
      options: {}
    };
  },
  computed: {
    durTime() {
      return this.options
        ? this.options.durTime || this.defaultDurTime
        : this.defaultDurTime;
    },
    radius() {
      return this.options
        ? this.options.radius || (this.widthData / 2)
        : (this.widthData / 2);
    },
    emptyColor() {
      return this.options
        ? this.options.emptyColor || this.defaultEmptyColor
        : this.defaultEmptyColor;
    },
    srtokeWidth() {
      return this.options
        ? this.options.srtokeWidth || this.defaultSrtokeWidth
        : this.defaultSrtokeWidth;
    },
    valueColor() {
      if (this.value < 0) {
        return this.options
          ? this.options.negativeColor || this.defaultNegativeColor
          : this.defaultNegativeColor;
      } else {
        return this.options
          ? this.options.positiveColor || this.defaultPositiveColor
          : this.defaultPositiveColor;
      }
    },
    strokeDasharray() {
      return 2 * 3.1415926 * this.radius;
    },
    strokeDashoffset() {
      return this.strokeDasharray + this.strokeDasharray * (this.chartCount / 100);
    }
  }
};
</script>
